<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录/注册 - 智慧园区</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
            background-color: #f5f5f5;
            height: 100vh;
            margin: 0;
            padding: 0;
            overflow: hidden;
        }
        
        .ios-status-bar {
            height: 44px;
            background-color: rgba(255, 255, 255, 0.9);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            border-bottom: 1px solid rgba(0, 0, 0, 0.1);
            display: flex;
            align-items: center;
            padding: 0 16px;
            position: relative;
        }
        
        .ios-status-bar.dark {
            background-color: rgba(30, 30, 30, 0.9);
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        }
        
        .glass-card {
            background: rgba(255, 255, 255, 0.7);
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
            border-radius: 20px;
            border: 1px solid rgba(255, 255, 255, 0.3);
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
        }
        
        .glass-card.dark {
            background: rgba(30, 30, 30, 0.7);
            border: 1px solid rgba(255, 255, 255, 0.1);
        }
        
        .ios-input {
            background: rgba(255, 255, 255, 0.8);
            border-radius: 12px;
            border: 1px solid rgba(0, 0, 0, 0.1);
            padding: 12px 16px;
            font-size: 16px;
            transition: all 0.3s ease;
        }
        
        .ios-input.dark {
            background: rgba(50, 50, 50, 0.8);
            border: 1px solid rgba(255, 255, 255, 0.1);
            color: white;
        }
        
        .ios-input:focus {
            outline: none;
            box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.3);
        }
        
        .ios-button {
            background: linear-gradient(135deg, #0ea5e9, #2563eb);
            border-radius: 12px;
            color: white;
            font-weight: 600;
            padding: 14px;
            border: none;
            transition: all 0.3s ease;
        }
        
        .ios-button:active {
            transform: scale(0.98);
        }
        
        .tab-active {
            position: relative;
            color: #0ea5e9;
            font-weight: 600;
        }
        
        .tab-active:after {
            content: '';
            position: absolute;
            bottom: -10px;
            left: 0;
            width: 100%;
            height: 3px;
            background-color: #0ea5e9;
            border-radius: 3px;
        }
        
        .tab-active.dark {
            color: #38bdf8;
        }
        
        .tab-active.dark:after {
            background-color: #38bdf8;
        }
        
        /* 暗色模式样式 */
        .dark-mode .glass-card {
            background: rgba(30, 30, 30, 0.7);
            border: 1px solid rgba(255, 255, 255, 0.1);
        }
        
        .dark-mode .ios-input {
            background: rgba(50, 50, 50, 0.8);
            border: 1px solid rgba(255, 255, 255, 0.1);
            color: white;
        }
        
        .dark-mode .ios-status-bar {
            background-color: rgba(30, 30, 30, 0.9);
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        }
    </style>
</head>
<body>
    <div id="app" class="relative h-full">
        <!-- 背景图 -->
        <div class="absolute inset-0 z-0">
            <img src="https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?q=80&w=2070&auto=format&fit=crop" 
                 alt="Background" 
                 class="w-full h-full object-cover">
        </div>
        
        <!-- iOS 状态栏 -->
        <div class="ios-status-bar z-10">
            <div class="flex justify-between items-center w-full">
                <div class="text-sm font-medium text-gray-800 dark:text-gray-200">9:41</div>
                <div class="flex space-x-2">
                    <i class="fas fa-signal text-gray-800 dark:text-gray-200"></i>
                    <i class="fas fa-wifi text-gray-800 dark:text-gray-200"></i>
                    <i class="fas fa-battery-full text-gray-800 dark:text-gray-200"></i>
                </div>
            </div>
        </div>
        
        <!-- 主内容 -->
        <div class="relative z-10 h-full pt-12 px-6">
            <!-- Logo 和标题 -->
            <div class="flex flex-col items-center mb-10">
                <div class="w-24 h-24 rounded-3xl bg-white dark:bg-gray-800 shadow-lg flex items-center justify-center mb-4">
                    <i class="fas fa-building text-5xl text-blue-500"></i>
                </div>
                <h1 class="text-3xl font-bold text-white mb-1">智慧园区</h1>
                <p class="text-sm text-white/80">便捷服务 · 智慧管理</p>
            </div>
            
            <!-- 登录/注册卡片 -->
            <div class="glass-card p-6 mx-auto max-w-md">
                <!-- 切换标签 -->
                <div class="flex justify-center space-x-12 mb-8">
                    <div class="tab-active text-lg">登录</div>
                    <div class="text-lg text-gray-600 dark:text-gray-400">注册</div>
                </div>
                
                <!-- 登录表单 -->
                <form class="space-y-5">
                    <div>
                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">手机号码</label>
                        <input type="tel" class="ios-input w-full" placeholder="请输入手机号码" maxlength="11">
                    </div>
                    
                    <div>
                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">密码</label>
                        <div class="relative">
                            <input type="password" class="ios-input w-full pr-10" placeholder="请输入密码">
                            <i class="fas fa-eye-slash absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
                        </div>
                    </div>
                    
                    <div class="text-right">
                        <a href="#" class="text-sm text-blue-500 dark:text-blue-400">忘记密码?</a>
                    </div>
                    
                    <button type="button" class="ios-button w-full">
                        登录
                    </button>
                </form>
                
                <!-- 游客模式 -->
                <div class="mt-8 p-4 border border-dashed border-gray-300 dark:border-gray-600 rounded-xl">
                    <div class="flex items-center justify-between">
                        <div>
                            <div class="text-base font-medium text-gray-800 dark:text-gray-200">游客模式</div>
                            <div class="text-xs text-gray-500 dark:text-gray-400">无需登录，体验部分功能</div>
                        </div>
                        <button class="px-4 py-2 bg-gray-100 dark:bg-gray-700 rounded-lg text-sm font-medium text-gray-700 dark:text-gray-300">
                            立即体验
                        </button>
                    </div>
                </div>
                
                <!-- 底部协议 -->
                <div class="mt-6 flex items-center justify-center">
                    <input type="checkbox" checked class="w-4 h-4 text-blue-500 rounded border-gray-300">
                    <span class="ml-2 text-xs text-gray-600 dark:text-gray-400">
                        我已阅读并同意 <a href="#" class="text-blue-500">《用户协议》</a> 和 <a href="#" class="text-blue-500">《隐私政策》</a>
                    </span>
                </div>
            </div>
            
            <!-- 底部装饰 -->
            <div class="absolute bottom-8 left-0 right-0 flex justify-center">
                <div class="w-32 h-1 bg-white/30 rounded-full"></div>
            </div>
        </div>
    </div>
    
    <script>
        // 检测系统暗色模式
        if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
            document.body.classList.add('dark-mode');
            document.querySelectorAll('.ios-status-bar, .glass-card, .ios-input, .tab-active').forEach(el => {
                el.classList.add('dark');
            });
        }
        
        // 监听系统暗色模式变化
        window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
            if (e.matches) {
                document.body.classList.add('dark-mode');
                document.querySelectorAll('.ios-status-bar, .glass-card, .ios-input, .tab-active').forEach(el => {
                    el.classList.add('dark');
                });
            } else {
                document.body.classList.remove('dark-mode');
                document.querySelectorAll('.ios-status-bar, .glass-card, .ios-input, .tab-active').forEach(el => {
                    el.classList.remove('dark');
                });
            }
        });
    </script>
</body>
</html> 